## -*- coding: utf-8 -*-
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>我看图 &gt;&gt; ${album.name} </title>
        <link href="/assets/default.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            #album_list li { float: left; margin: 0 0 10px 15px; line-height: normal; position: relative; }
                #album_list li p { line-height:normal; position:absolute; overflow: hidden; width:100%; height: 18px; bottom: 0; color: #ddd; z-index: 10; background: rgba(0,0,0,0.5); font-size: 14px; }
            #album_list img { vertical-align: middle; }
            #album_nav { height: 100px; }
            #album_name { position: absolute; left: 0; top: 0; z-index: -1; color: #ddd; font: 120px "Microsoft YaHei", "黑体"; }
            #album_homelink { position: absolute; right: 30px; top: 25px; }
                #album_homelink a { font-size: 14px; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
        	$("#album_list li").mouseenter(function(){
                $(this).find('p').css({'overflow': 'visible', 'height': 'auto'});
        	}).mouseleave(function(){
                $(this).find('p').css({'overflow': 'hidden', 'height': '18px'});
            });
            $("#album_list li p").each(function(){
                if($(this).text() == ''){
                    $(this).hide();
                }
            });
        });
        </script>
    </head>
    <body>
        <div id="album_nav"></div>
        <div id="album_name">${album.name}</div>
        <div id="album_homelink"><a href="/">&lt;&lt;相册列表</a></div>
        <div id="album_list">
            <ul>
            %for p in album.photo_set.order('name'):
                <li>
                	<a href="/photo/${album.name}#${p.key().id()}">
                		<img src="${p.genThumbURL()}" alt="${p.name}" />
		                <p>${p.desc or ""}</p>
                	</a>
                </li>
            %endfor
            </ul>
        </div>
    </body>
</html>